<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>register1</title>

  <!--  -->

  <link rel="stylesheet" href="plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
  <link rel="stylesheet" href="plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
  <link rel="stylesheet" href="dist/css/adminlte.min.css">
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
  <link type="text/css" rel="stylesheet" charset="UTF-8"
    href="https://translate.googleapis.com/translate_static/css/translateelement.css">
  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet"
    href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome Icons -->
  <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
  <!-- IonIcons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="dist/css/adminlte.min.css">
  <style>
    .white_content {
      display: none;
      position: absolute;
      top: 25%;
      left: 25%;
      width: 55%;
      height: 300px;
      padding: 20px;
      border: 1px solid lightgray;
      background-color: white;
      z-index: 1002;
      overflow: auto;
    }
  </style>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
  <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>
<!--
`body` tag options:

  Apply one or more of the following classes to to the body tag
  to get the desired effect

  * sidebar-collapse
  * sidebar-mini
-->

<body class="hold-transition sidebar-mini">
  <div class="wrapper" id="app">
    <div class="content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-12">
            <div class="card">
              <div class="card-header border-0">
                <nav class=" navbar navbar-expand navbar-white navbar-light">
                  <ul class="navbar-nav nav-sidebar ">
                    <li class="nav-item d-none d-sm-inline-block">
                      <a onclick="document.getElementById('light1').style.display='block';" href="#" class="nav-link">
                        <i class="fas  fa-random nav-icon"></i>
                        <p>导出</p>
                      </a>
                    </li>
                  </ul>
                </nav>
              </div>
              <div class="card-body">
                <div class="row">
                  <div class="col-sm-6">
                    <div class="row">
                      <div class="col-sm-6">
                        <p>用户：</p>
                      </div>
                      <div class="col-sm-6">
                        <ul class="navbar-nav nav-sidebar ">
                          <li class="nav-item d-none d-sm-inline-block">
                            <select id="userid" class="selectpicker show-tick form-control" style="width: 200px;">
                              <option v-for="user in users">{{user.uid}}</option>
                            </select>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-6">
                    <div class="row">
                      <div class="col-sm-6">
                        <p>角色：</p>
                      </div>
                      <div class="col-sm-6">
                        <table>
                          <tr>
                            <th><input type="checkbox"></th>
                            <th>id</th>
                            <th>角色</th>
                          </tr>
                          <tr>
                            <td><input id="ch1" type="checkbox"></td>
                            <td id="r1">2001</td>
                            <td>manager</td>
                          </tr>
                          <tr>
                            <td><input id="ch2" type="checkbox"></td>
                            <td id="r2">2002</td>
                            <td>saleman</td>
                          </tr>

                        </table>
                      </div>
                    </div>
                  </div>
                </div>


                <!-- /.card-body -->
              </div>
              <div class="card-footer">
                <div class="card-tools">
                  <button @click="addrole()" type="button" class="btn btn-primary">提交</button>
                  <button type="button" class="btn btn-primary"></button>
                </div>
              </div>
              <div class="d-flex">

              </div>
            </div>


          </div>
        </div>
        <div class="row">
          <div class="col-lg-12">
            <div class="card">
              <div class="card-body">
                <div class="row">
                  <div class="col-sm-6">
                    <div class="row">
                      <div class="col-sm-6">
                        <p>角色：</p>
                      </div>
                      <div class="col-sm-6">
                        <ul class="navbar-nav nav-sidebar ">
                          <li class="nav-item d-none d-sm-inline-block">
                            <select id="roles" class="selectpicker show-tick form-control" style="width: 200px;">
                              <option>2001:manager</option>
                              <option>2002:saleman</option>
                              <option>2003:looker</option>
                            </select>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-6">
                    <div class="row">
                      <div class="col-sm-6">
                        <p>权限：</p>
                      </div>
                      <div class="col-sm-6">
                        <ul class="navbar-nav nav-sidebar ">
                          <table>
                            <tr>
                              <th><input type="checkbox"></th>
                              <th>id</th>
                              <th>权限</th>
                            </tr>
                            <tr>
                              <td><input id="ch3" type="checkbox"></td>
                              <td id="r3">3001</td>
                              <td>m:find</td>
                            </tr>
                            <tr>
                              <td><input id="ch4" type="checkbox"></td>
                              <td id="r4">3002</td>
                              <td>m:add</td>
                            </tr>
                            <tr>
                              <td><input id="ch5" type="checkbox"></td>
                              <td id="r5">3003</td>
                              <td>m:del</td>
                            </tr>
                            <tr>
                              <td><input id="ch6" type="checkbox"></td>
                              <td id="r6">3004</td>
                              <td>m:update</td>
                            </tr>
                            <tr>
                              <td><input id="ch7" type="checkbox"></td>
                              <td id="r7">3005</td>
                              <td>s:find</td>
                            </tr>

                          </table>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="card-footer">
                <div class="card-tools">
                  <button @click="addperms()" type="button" class="btn btn-primary">提交权限</button>
                  <button type="button" class="btn btn-primary"></button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row"></div>
        <div class="row"></div>
      </div>
    </div>
  </div>
  <!-- ./wrapper -->

  <!-- REQUIRED SCRIPTS -->

  <!-- jQuery -->
  <script src="plugins/jquery/jquery.min.js"></script>
  <!-- Bootstrap -->
  <script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
  <!-- AdminLTE -->
  <script src="dist/js/adminlte.js"></script>

  <!-- OPTIONAL SCRIPTS -->
  <script src="plugins/chart.js/Chart.min.js"></script>
  <!-- AdminLTE for demo purposes -->
  <script src="dist/js/demo.js"></script>
  <!-- AdminLTE dashboard demo (This is only for demo purposes) -->
  <script src="dist/js/pages/dashboard3.js"></script>
  <!--  -->

  <script src="plugins/datatables/jquery.dataTables.min.js"></script>
  <script src="plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
  <script src="plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
  <script src="plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
  <script src="dist/js/adminlte.min.js"></script>
  <script>
    new Vue({
      el: "#app",
      data: {
        users: [],
        cups: []

      },
      mounted() {
        axios
          .get('user1/all')
          .then(res => {
            console.info(res.data);
            this.users = res.data.data;

          })



      },
      methods: {
        addrole: function () {
          var uid = document.getElementById('userid').value;

          var mycars = new Array();

          var s = " ";
          var c = $("#ch1").prop("checked");

          if (c) {
            var a = document.getElementById("r1").innerText;
            mycars.push(a);

          };
          var d = $("#ch2").prop("checked");

          if (d) {
            var b = document.getElementById("r2").innerText;

            mycars.push(b);

          };
          $.ajax({
            url: "user1/addRoles",
            type: "GET",
            traditional: true,
            data: {
              "uid": uid,
              "roles": mycars
            },
            success: function (res) {
              console.log(res.data);
            }
          })

        },
        addperms: function () {
          var rid = document.getElementById('roles').value;

          rid = rid.split(":");

          rid = parseInt(rid[0]);
          alert(rid);
          var cars = new Array();

          if ($("#ch3").prop("checked")) {
            var c = document.getElementById("r3").innerText;

            cars.push(c);

          };
          if ($("#ch4").prop("checked")) {
            var d = document.getElementById("r4").innerText;

            cars.push(d);

          };
          if ($("#ch5").prop("checked")) {
            var e = document.getElementById("r5").innerText;

            cars.push(e);

          };
          if ($("#ch6").prop("checked")) {
            var f = document.getElementById("r6").innerText;

            cars.push(f);

          };

          if ($("#ch7").prop("checked")) {
            var g = document.getElementById("r7").innerText;

            cars.push(g);
            alert(cars)
          };


          $.ajax({
            url: "user1/addPerms",
            type: "GET",
            traditional: true,
            data: {
              "rid": rid,
              "perms": cars
            },
            success: function (res) {
              console.log(res.data);
            }
          })
        }
      }
    });
  </script>




</body>

</html>